<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>模板消息群发</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  {include file="public/css"/}
	<link href="__STATIC__/imgsrc/designer.css" rel="stylesheet">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-card layui-col-md12">
				<div class="layui-card-header">
					模板消息群发
					<button class="layui-btn layui-btn-primary layui-btn-sm" onclick="openmax('{:url('tmplsendlog')}/isopen/1')" style="float: right;margin-left:10px;margin-top: 6px;">发送记录</button>
				</div>
				<div class="layui-card-body" pad15>

					<blockquote class="layui-elem-quote">
					1、所有服务号都可以在功能->添加功能插件处看到申请模板消息功能的入口，但只有认证后的服务号才可以申请模板消息的使用权限并获得该权限；<br>
					2、当前每个账号的模板消息的日调用上限为10万次，单个模板没有特殊限制。当账号粉丝数超过10W/100W/1000W时，模板消息的日调用上限会相应提升，以公众号MP后台开发者中心页面中标明的数字为准。<br>
					3、过度使用模板消息群发，会触发微信风控系统，有封号风险，请勿过度使用。
					</blockquote>
					<div class="flex">
						<div class="layui-form form-label-w6 flex1" lay-filter="" style="padding-bottom:20px">
							<input type="hidden" name="info[title]" value=""/>
							<div class="layui-form-item">
								<label class="layui-form-label">选择模板：</label>
								<div class="layui-input-inline" style="width:300px">
									<select name="info[template_id]" lay-filter="template_id">
										<option value="">请选择模板</option>
										{foreach $tmpllist as $v}
										<option value="{$v.template_id}">{$v.title}</option>
										{/foreach}
									</select>
								</div>
							</div>
							<!-- <div class="layui-form-item">
								<label class="layui-form-label">示例内容：</label>
								<div class="layui-input-inline" style="width:300px" >
									<pre id="exampledata"></pre>
								</div>
							</div> -->
							<div class="layui-form-item">
								<label class="layui-form-label">顶部描述：</label>
								<div class="layui-input-inline" style="width:300px">
									<textarea class="layui-textarea" name="data[first][value]" style="height:100px"></textarea>
								</div>
								<input type="hidden" name="data[first][color]" value="#333333"/>
<!--								<div class="__colorpicker"></div>-->
							</div>
							<div id="fieldcontent">
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">底部描述：</label>
								<div class="layui-input-inline" style="width:300px">
									<textarea class="layui-textarea" name="data[remark][value]" style="height:100px;"></textarea>
								</div>
								<input type="hidden" name="data[remark][color]" value="#333333"/>
<!--								<div class="__colorpicker"></div>-->
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">链接地址：</label>
								<div class="layui-input-inline" style="width:300px">
									<input type="text" name="info[url]" class="layui-input" value="">
								</div>
								<button class="layui-btn layui-btn-primary" onclick="chooseUrl()" style="float:left">选择链接</button>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">发送对象：</label>
								<div class="layui-input-inline" style="width:500px">
									<input type="radio" name="info[to_type]" value="1" checked title="填写openid" lay-filter="to_type"/>
									<input type="radio" name="info[to_type]" value="2" title="选择标签" lay-filter="to_type"/>
									<input type="radio" name="info[to_type]" value="3" title="全部用户({$fanscount})" lay-filter="to_type"/>
								</div>
							</div>
							<div class="layui-form-item" id="to_type_1">
								<label class="layui-form-label">用户openid：</label>
								<div class="layui-input-inline" style="width:300px">
									<textarea class="layui-textarea" name="info[openids]" style="height:200px"></textarea>
								</div>
								<div class="layui-form-mid layui-word-aux layui-clear">openid请在粉丝列表中查找，请将用户openid输入或粘贴到文本框中，一行一个，请勿输入一行多个或空行或其他字符</div>
							</div>
							<div class="layui-form-item" id="to_type_2" style="display:none">
								<label class="layui-form-label">选择标签：</label>
								<div class="layui-input-inline" style="width:200px">
									<select name="info[tagid]">
										<option value="">请选择标签</option>
										{foreach $tagslist as $v}
										<option value="{$v.tagid}">{$v.name}({$v.count})</option>
										{/foreach}
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"></label>
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="setmypass">确认发送</button>
								</div>
							</div>
						</div>
						<div>
							<div class="dsn-phone">
								<div class="dsn-phone-left"></div>
								<div class="dsn-phone-center">
									<div class="dsn-phone-top"></div>
									<div class="dsn-phone-main">
										<div id="editor">
											<div class="dsn-mod dsn-topbar dsn-mod-nohover" style="color:#fff;background:#000;height:60px">
												<div style="float:left;width:100%;font-size:12px">
													<div style="float:left;width:30%">&nbsp;<i class="fa fa-signal"></i> wechat <i class="fa fa-wifi"></i></div>
													<div style="float:left;text-align:center;width:40%">12:00</div>
													<div style="float:left;text-align:right;width:30%">100% <i class="fa fa-battery-full"></i>&nbsp;</div>
												</div>
												<div style="float:left;width:98%;margin:2px 1% 0 1%;">
													<div style="float:left;width:30%">&nbsp;</div>
													<div style="float:left;text-align:center;width:40%;font-size:16px;height:27px;line-height:27px">{$mpauthinfo.nick_name}</div>
												</div>
											</div>
											<div id="editor-content" style="overflow:hidden">
												<div style="width:90%;margin:20px 5%;border:1px solid #aaa;border-radius:5px;background:#fff;padding:12px 12px;font-size:14px;color:#333">
													<div style="color:#000;font-weight:bold;" id="tmplname_preview">模板名称</div>
													<div style="color:#999;padding-bottom:5px">{:date('m月d日')}</div>
													<div id="first_preview" style="white-space:pre-wrap;"></div>
													<div id="fieldpreview">
													</div>
													<div id="remark_preview" style="white-space:pre-wrap;"></div>
												</div>
											</div>
										</div>
									</div>
									<div class="dsn-phone-bottom"></div>
								</div>
								<div class="dsn-phone-right"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
    </div>
  </div>
	{include file="public/js"/}
	<script>
	var tmpllist = {:jsonEncode($tmpllist)};
	
	$(".layui-form textarea,.layui-form input").bind("input change propertychange",function(event){
		inputchange(this);
	})
	function inputchange(obj){
		console.log($(obj).val())
		var value = $(obj).val()
		var fieldname = $(obj).attr('name');
		var fieldid = $(obj).attr('id');
		console.log(fieldid)
		if(fieldname == 'data[first][value]'){
			$('#first_preview').text(value);
		}
		if(fieldname == 'data[first][color]'){
			$('#first_preview').css({'color':value});
		}
		if(fieldname == 'data[remark][value]'){
			$('#remark_preview').text(value);
		}
		if(fieldname == 'data[remark][color]'){
			$('#remark_preview').css({'color':value});
		}
		if(fieldid && fieldid.indexOf('fieldvalue_')===0){
			console.log($(obj).attr('data-preview'))
			$('#'+$(obj).attr('data-preview')).text(value);
		}
		if(fieldid && fieldid.indexOf('fieldcolor_')===0){
			$('#'+$(obj).attr('data-preview')).css({'color':value});
		}
	}
	layui.form.on('radio(to_type)',function(data){
		$('#to_type_1').hide();
		$('#to_type_2').hide();
		if(data.value==1){
			$('#to_type_1').show();
		}
		if(data.value==2){
			$('#to_type_2').show();
		}
	})
	layui.form.on('select(template_id)', function(data){
		for(var i in tmpllist){
			if(tmpllist[i].template_id == data.value){
				var fields = tmpllist[i].fields
				var html = '';
				var previewhtml = '';
				for(var j in fields){
					if(fields[j][0]!=''){
						html+='<div class="layui-form-item">';
						html+='	<label class="layui-form-label">'+fields[j][0]+'</label>';
						html+='	<div class="layui-input-inline" style="width:300px">';
						html+='		<input type="hidden" name="data['+fields[j][1]+'][title]" value="'+fields[j][0]+'">';
						html+='		<input type="text" name="data['+fields[j][1]+'][value]" id="fieldvalue_'+fields[j][1]+'" data-preview="'+fields[j][1]+'_preview" class="layui-input">';
						html+='	</div>';
						html+='	<input type="hidden" name="data['+fields[j][1]+'][color]" id="fieldcolor_'+fields[j][1]+'" data-preview="'+fields[j][1]+'_preview" value="#333333"/>';
						// html+='	<div class="__colorpicker"></div>';
						html+='</div>';
						previewhtml += '<div>'+fields[j][0]+'<span style="color:#333333" id="'+fields[j][1]+'_preview"></span></div>';
					}
				}
				$('#fieldcontent').html(html);
				$('#fieldpreview').html(previewhtml);
				$('#tmplname_preview').html(tmpllist[i].title);
				$("input[name='info[title]']").val(tmpllist[i].title);
				//$('#exampledata').html(tmpllist[i].example);
				layui.form.render();
				initcolorpicker2();
				$(".layui-form input").bind("input change propertychange",function(event){
					inputchange(this);
				})
			}
		}
	})
	var pagenum = 0;
	var pagelimit = 20;
	layui.form.on('submit(setmypass)', function(obj){
		var field = obj.field
		pagenum = 0;
		//var index= layer.load();
		var field = obj.field
		_tplsend(field);
		return;
		var index = layer.load();
		$.post('',obj.field,function(data){
			layer.close(index);
			dialog(data.msg,data.status);
			if(data.status){
				setTimeout(function(){
					location.href="{:url('sendlog')}";
				},2000)
			}
		})
	})
	function _tplsend(field){
			var index = layer.load();
			pagenum++;
			$.ajax({
				type:'POST',
				url:"{:url('tmplsend')}/pagenum/"+pagenum+'/pagelimit/'+pagelimit,
				dataType:'json',
				data:field,
				success:function(res){
					console.log(res)
					layer.close(index);
						layer.msg('已发送'+res.sendcount+'条,成功'+res.successcount+'条,失败'+res.errorcount+'条',{offset:'100px'});
					if(res.status==2){ //继续发送
						field.logid = res.logid
						_tplsend(field);
					}else{
						if(res.status==1){
							dialog('共发送'+res.sendcount+'条,成功'+res.successcount+'条,失败'+res.errorcount+'条',res.status,"{:url('tmplsendlog')}");
						}else{
							dialog(res.msg,res.status);
						}
					}
				},
				error:function(){
					layer.close(index);
					dialog('未知错误',0);
				}
			})
	}
	function initcolorpicker2(){
		if($('.__colorpicker').length > 0){
			$('.__colorpicker').each(function(){
				var $this = $(this);
				var _colorpickerId = $this.attr('id') ? $this.attr('id') : "__colorpicker" + (Date.now()) + parseInt(Math.random()*100000000);
				$this.attr('id',_colorpickerId);
				var input = $this.parent().find('.layui-input-inline input');
				var textarea = $this.parent().find('.layui-input-inline textarea');
				var colorinput = $this.prev('input');
				console.log(input.val())
				layui.colorpicker.render({
					elem: '#'+_colorpickerId,
					format:($this.attr('coloralpha')=='1'? 'rgb':'hex'),
					alpha: ($this.attr('coloralpha')=='1'? true:false),
					color: (colorinput && colorinput.val() ? colorinput.val() : "#333333"),
					predefine: true,
					colors: ['#ff4444','#e64340','#ec8b89','#ed3f14','#ff9900',
						'#06bf04','#179b16','#9ed99d','#19be6b',
						'#3388ff','#2b85e4','#5cadff',
						'#000000','#333333','#666666','#999999','#c9c9c9','#f7f7f8','#1c2438','#495060','#dddee1','#e9eaec'],
					change:function(color){
						//ctrl.$setViewValue(color);
						if($this.attr('coloralpha')!='1') color = color.toUpperCase()
						input && input.css({'color':color});
						textarea && textarea.css({'color':color});
						colorinput && colorinput.val(color) && colorinput.change();
					}
				});
			})
		}
	}
	initcolorpicker2();
  </script>
	<script>
	function chooseUrl(){
		layer.open({type:2,shadeClose:true,area:['1100px', '650px'],'title':'选择链接',content:"{:url('DesignerPage/chooseurl')}"})
	}
	function chooseLink(urlname,url){
		url = '{$Think.const.PRE_URL2}/h5/{$aid}.html#'+url;
		$("input[name='info[url]']").val(url);
	}
	</script>
	{include file="public/copyright"/}
</body>
</html>